<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
    <!-- 会使用最新版本，你最好指定一个版本 -->
    <script src="https://unpkg.com/naive-ui"></script>
    <script src="../node_modules/@molar/annotator-core/dist/annotator-core.global.js"></script>
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="app">
      <div id="example"></div>
      <!-- dialog -->
      <n-dialog-provider>
        <content />
      </n-dialog-provider>
    </div>
    <script>
      let { onMounted, defineComponent } = Vue;
      let { useDialog, NDialogProvider } = naive;
      const App = {
        components: {
          NDialogProvider,
        },
        setup() {
          onMounted(() => {
            initMolarAnnotator();
          });
          const initMolarAnnotator = () => {
            let { Core } = MolarAnnotatorCore;
            const dialog = useDialog();
            let originString = `孟子见梁惠王
                                    沛公则置车骑
                                    此人一一为所具言所闻
                                    廉君宣恶言`;
            let domElement = document.getElementById("example");
            const annotator = new Core(originString, domElement);
            annotator.on("textSelected", (startIndex, endIndex) => {
              dialog.success({
                title: "请选择标记类型",
                content: "111",
                positiveText: "确定",
                negativeText: "不确定",
              });
            });
          };
          return {
            message: "naive",
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(naive);
      app.mount("#app");
    </script>
  </body>
</html>
